<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 64px;
  text-align: right;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05);
  z-index: 10;
}

.form-el-radion {
  line-height: 30px;
  padding: 5px 0px;
  width: 100%;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.clearfix span {
  font-size: 18px;
}

.table tr {
  border-bottom: 1px solid #EBEEF5;
  line-height: 40px;
  height: 40px;
  padding: 5px 10px;
}

.table {
  border-collapse: collapse;
  cellspacing: 0;
  text-align: center;
}

.layuiadmin-card-list {
  padding: 15px;
}

.layui-card-body {
  position: relative;
  padding: 10px 15px;
  line-height: 24px;
}

.layuiadmin-card-list p.layuiadmin-big-font {
  font-size: 36px;
  color: #666;
  line-height: 36px;
  padding: 5px 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}

.layuiadmin-span-color {
  font-size: 14px;
  position: absolute;
  right: 15px;
}

.el-card__header {
  padding: 10px 15px;
}

.job-inf-title {
  padding-top: 10px;
  padding-left: 10px;
  /*font-weight: 600;*/
}

.job-inf-value {
  padding: 10px;
  font-size: 20px;
}

.job-inf-value span {
  position: relative;
  top: 4px;
}

.job-inf-value img {
  width: 40px;
  height: 40px;
  padding-bottom: 10px;
  float: right;
}

.table tr:nth-child(2n-1) {
  background: #F7F9FA
}

.el-icon-question {
  color: #347DE1
}

.colorblue {
  color: #424957;
}
</style>
<template>
  <div class="app-container">
    <el-row>
      <el-card class="box-card appinfcard" :body-style="{ padding: '0px' }" shadow="never">
        <el-col :span="4">
          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <div class="job-inf-title">
              待处理
              <el-tooltip class="item" effect="dark" content="周期任务 | 定时任务" placement="bottom">
                <i style="margin-left: 3%" class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="job-inf-value">
                            <span>
                     <vns style="margin-bottom:30px;" :start="0" :end="periodTopData.cycleTaskTodoCount" :times="20"
                          :speed="50"/>
                              <span> |</span>
                              <vns style="margin-bottom:30px;" :start="0" :end="cronTopData.cronTaskTodoCount"
                                   :times="20" :speed="50"/>
                            </span>
              <img src="../../../assets/images/todoRun.png">
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <div class="job-inf-title">
              处理中
              <el-tooltip class="item" effect="dark" content="周期任务 | 定时任务" placement="bottom">
                <i style="margin-left: 3%" class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="job-inf-value">
                            <span>
                              <vns style="margin-bottom:30px;" :start="0"
                                   :end="periodTopData.cycleTaskRunningTotalCount" :times="20" :speed="50"/>
                              <span> |</span>
                              <vns style="margin-bottom:30px;" :start="0" :end="cronTopData.cronTaskRunningTotalCount"
                                   :times="20" :speed="50"/>
                            </span>

              <img src="../../../assets/images/running.png">
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <div class="job-inf-title">
              今日已成功
              <el-tooltip class="item" effect="dark" content="周期任务 | 定时任务" placement="bottom">
                <i style="margin-left: 3%" class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="job-inf-value">
                          <span>
                          <vns style="margin-bottom:30px;" :start="0" :end="periodTopData.cycleTaskSuccessCount"
                               :times="20" :speed="50"/>
                          <span> |</span>
                          <vns style="margin-bottom:30px;" :start="0" :end="cronTopData.cronTaskSuccessCount"
                               :times="20" :speed="50"/>
</span>
              <img src="../../../assets/images/runSuccess.png">
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <div class="job-inf-title">
              今日已失败
              <el-tooltip class="item" effect="dark" content="周期任务 | 定时任务" placement="bottom">
                <i style="margin-left: 3%" class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="job-inf-value">
                            <span>
                             <vns style="margin-bottom:30px;" :start="0" :end="periodTopData.cycleTaskFailCount"
                                  :times="20" :speed="50"/>
                              <span> |</span>
                              <vns style="margin-bottom:30px;" :start="0" :end="cronTopData.cronTaskFailCount"
                                   :times="20" :speed="50"/>

                            </span>
              <img src="../../../assets/images/runFail.png">
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <div class="job-inf-title">
              历史成功
              <el-tooltip class="item" effect="dark" content="周期任务 | 定时任务" placement="bottom">
                <i style="margin-left: 3%" class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="job-inf-value">

                          <span>
                             <vns style="margin-bottom:30px;" :start="0" :end="periodTopData.cycleTaskSuccessTotalCount"
                                  :times="20" :speed="50"/>
                              <span> |</span>
                              <vns style="margin-bottom:30px;" :start="0" :end="cronTopData.cronTaskSuccessTotalCount"
                                   :times="20" :speed="50"/>

                            </span>

              <img src="../../../assets/images/history.png">
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <div class="job-inf-title">
              历史失败
              <el-tooltip class="item" effect="dark" content="周期任务 | 定时任务" placement="bottom">
                <i style="margin-left: 3%" class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="job-inf-value">
                          <span>
                             <vns style="margin-bottom:30px;" :start="0" :end="periodTopData.cycleTaskFailTotalCount"
                                  :times="20" :speed="50"/>
                              <span> |</span>
                              <vns style="margin-bottom:30px;" :start="0" :end="cronTopData.cronTaskFailTotalCount"
                                   :times="20" :speed="50"/>

                            </span>

              <img src="../../../assets/images/fail.png">
            </div>
          </el-card>
        </el-col>
      </el-card>
    </el-row>

    <el-row type="flex" class="row-bg">
      <el-col :span="8">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span>基本信息</span>
          </div>
          <table class="table" style="width: 100%;">
            <tbody>
            <tr>
              <td class="field-label">应用名称</td>
              <td colspan="3" class="field-value currentModeOnly">{{ appInf.appName }}</td>
            </tr>
            <tr>
              <td class="field-label">节点</td>
              <td class="field-value currentModeOnly">{{ nodeList.length }}</td>
              <td class="field-label">并发数</td>
              <td class="field-value currentModeOnly">
                <div class="usage" style="    margin-top: -7px;">
                  <span class="usage-reading">{{ appInf.conNumUssge }}/{{ appInf.concurrentNum }}</span>
                  <el-progress :percentage="appInf.conUsageRate" :show-text=false color="#347DE1"
                               style="margin-bottom: 4px;margin-top: -10px;padding-right: 10px;"/>
                </div>
              </td>
            </tr>
            <tr>
              <td class="field-label">应用组</td>
              <td class="field-value currentModeOnly">{{ appInf.groupName }}</td>
              <td class="field-label">资源数</td>
              <td class="field-value currentModeOnly">
                <div class="usage" style="    margin-top: -7px;">
                  <span class="usage-reading"> {{ appInf.resNumUsage }}/{{ appInf.resNum }}</span>
                  <el-progress :percentage="appInf.resUsageRate" :show-text=false color="#1CA965"
                               style="margin-bottom: 4px;margin-top: -10px;padding-right: 10px;"/>
                </div>
              </td>
            </tr>
            <tr>
              <td class="field-label">分配策略</td>
              <td colspan="3" class="field-value currentModeOnly">{{ appInf.dispatcherStrategyName }}</td>
            </tr>
            <tr>
              <td class="field-label">上次更新</td>
              <td colspan="3" class="field-value currentModeOnly">{{ appInf.lastUpdateTime }}</td>
            </tr>
            </tbody>
          </table>
        </el-card>

        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span>节点状态</span>
          </div>
          <div class="grid-content bg-purple">
            <el-table :data="nodeList" stripe style="width: 100%;" :header-cell-style="tableHeaderColor" border>
              <el-table-column prop="agentHaStatus" label="节点">
                <template slot-scope="scope">
                  <!-- <i class="el-icon-success" v-if="scope.row.agentHaStatus == 'normal'" style="color: #42800d;font-size: 16px"></i>
                   <i class="el-icon-warning" v-if="scope.row.agentHaStatus == 'warn'" style="color: #FF8300;font-size: 16px"></i>
                   <i class="el-icon-error" v-if="scope.row.agentHaStatus == 'stop'" style="color: #ADB2B6;font-size: 16px"></i>
                   <i class="el-icon-warning" v-if="scope.row.agentHaStatus == 'error'" style="color: #DE1502;font-size: 16px"></i>
                   <i class="el-icon-warning" v-if="scope.row.agentHaStatus == null" style="color: #DE1502;font-size: 16px"></i> -->
                  <span style="margin-left: 0px">{{ scope.row.agentName }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="usageResNum" :show-overflow-tooltip="true" label="资源数" width="120">
                <template slot-scope="scope">
                  {{ scope.row.usedResNum }}/{{ scope.row.resNum }}
                  <el-progress :percentage="scope.row.resUsageRate" :show-text=false color="#347DE1"></el-progress>
                </template>
              </el-table-column>
              <el-table-column prop="usageConNum" :show-overflow-tooltip="true" label="并发数" width="120">
                <template slot-scope="scope">
                  {{ scope.row.usedConNum }}/{{ scope.row.concurrentNum }}
                  <el-progress :percentage="scope.row.conUsageRate" :show-text=false color="#1CA965"></el-progress>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>

        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span>内存队列中各业务日期作业情况</span>
          </div>
          <div class="grid-content bg-purple">
            <el-table :data="jobList" stripe style="width: 100%;" height="200" :header-cell-style="tableHeaderColor"
                      border>
              <el-table-column label="业务日期" width="180">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.bizDate }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="todoRunCount" label="待处理"/>
              <el-table-column prop="toRunCount" label="可处理"/>
              <el-table-column prop="runningCount" label="处理中"/>
            </el-table>
          </div>
        </el-card>

        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span>运行状况历史记录</span>
          </div>
          <div class="grid-content bg-purple">
            <el-table :show-header="false" :data="logList" v-el-table-infinite-scroll="load" height="200"
                      style="width: 100%" :header-cell-style="tableHeaderColor" border>
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="运行状况">
                      <span>{{ props.row.remindTitle }}</span>
                    </el-form-item>
                    <el-form-item label="时间">
                      <span>{{ props.row.crtTs }}</span>
                    </el-form-item>
                    <el-form-item label="原因">
                      <span>{{ props.row.remindContent }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column prop="warnLevel" label="运行状况">
                <template slot-scope="scope">
                  <i class="el-icon-success" v-if="scope.row.warnLevel == 'normal'"
                     style="color: #42800d;font-size: 16px"></i>
                  <i class="el-icon-warning" v-if="scope.row.warnLevel == 'warn'"
                     style="color: #FF8300;font-size: 16px"></i>
                  <i class="el-icon-warning" v-if="scope.row.warnLevel == 'error'"
                     style="color: #DE1502;font-size: 16px"></i>
                  <span style="margin-left: 10px">{{ scope.row.remindTitle }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="时间">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.crtTs }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>

      </el-col>
      <el-col :span="16" style="margin-left: 15px">
        <el-card class="box-card" :body-style="{ padding: '10px' }" style="height: 956px">
          <div slot="header" class="clearfix">
            <span>图表</span>
            <div style="float:right;" class="aa">
              <a style="margin-left: 10px;" target="_blank" class="buttonText" :class="{colorblue:cur==i}"
                 type="primary" @click="changeTime(String(i+1),i)" v-for="(item,i) in time" :key="i" :underline="false">{{ item }}</a>
              <!-- <el-link style="margin-left: 10px;" target="_blank" class="buttonText" :class="" type="primary" @click="changeTime('2')" :underline="false">1小时</el-link>
              <el-link style="margin-left: 10px;" target="_blank" class="buttonText" :class="" type="primary" @click="changeTime('3')" :underline="false">6小时</el-link>
              <el-link style="margin-left: 10px;" target="_blank" class="buttonText" :class="" type="primary" @click="changeTime('4')" :underline="false">12小时</el-link>
              <el-link style="margin-left: 10px;" target="_blank" class="buttonText" :class="" type="primary" @click="changeTime('5')" :underline="false">1天</el-link>
              <el-link style="margin-left: 10px;" target="_blank" class="buttonText" :class="" type="primary" @click="changeTime('6')" :underline="false">7天</el-link>
              <el-link style="margin-left: 10px;" target="_blank" class="buttonText" :class="" type="primary" @click="changeTime('7')" :underline="false">30天</el-link> -->
            </div>
          </div>

          <div style="padding: 10px">
            <el-row>
              <el-col :span="12" style="padding: 10px">
                <div class="grid-content bg-purple-light" style="border:1px solid #D6D8DB;">
                  <div style="font-size: 14px;margin: 1%;font-weight: 700;">任务执行结果统计
                    <el-tooltip class="item" effect="dark" content="任务执行结果统计" placement="bottom">
                      <i style="margin-left: 3%" class="el-icon-question"></i>
                    </el-tooltip>
                  </div>
                  <taskFinishStatusLineChart ref="taskFinishStatusLineChart"/>
                </div>
              </el-col>
              <el-col :span="12" style="padding: 10px">
                <div class="grid-content bg-purple-light" style="border:1px solid #D6D8DB;">
                  <div style="font-size: 14px;margin: 1%;font-weight: 700;">阻塞系数统计
                    <el-tooltip class="item" effect="dark" content="阻塞系数统计" placement="bottom">
                      <i style="margin-left: 3%" class="el-icon-question"></i>
                    </el-tooltip>
                  </div>
                  <taskBlockLineChart ref="taskBlockLineChart"/>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12" style="padding: 10px">
                <div class="grid-content bg-purple-light" style="border:1px solid #D6D8DB;">
                  <div style="font-size: 14px;margin: 1%;font-weight: 700;">各节点并发数和资源数
                    <el-tooltip class="item" effect="dark" content="各节点并发数和资源数" placement="bottom">
                      <i style="margin-left: 3%" class="el-icon-question"></i>
                    </el-tooltip>
                  </div>
                  <agentConAndResChart ref="agentConAndResChart"/>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import api from '@/api/app/appInf'
import {mapGetters} from 'vuex'
import taskFinishStatusLineChart from './components/taskFinishStatusLineChart'
import taskBlockLineChart from './components/taskBlockLineChart'
import agentConAndResChart from './components/agentConAndResChart'
import elTableInfiniteScroll from 'el-table-infinite-scroll';
import vns from 'vue-number-scroll'
export default {
  name: 'appInf',
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  components: {
    taskFinishStatusLineChart, taskBlockLineChart, agentConAndResChart, vns
  },
  mixins: [],
  data() {
    return {
      cur: 0,
      time: ['30分钟', '1小时', '6小时', '12小时', '1天', '7天', '30天'],
      appInf: {
        appName: null,
        groupName: null,
        nodeCount: null,
        dispatcherStrategyName: null,
        lastUpdateTime: null,
        resNumUsage: 0,
        conNumUssge: 0,
        resUsageRate: 0,
        conUsageRate: 0,
        resNum: 0,
        concurrentNum: 0
      },
      logList: [],
      periodTopData: {
        cycleTaskTodoTotalCount: 0, cycleTaskFailTotalCount: 0, cycleTaskSuccessTotalCount: 0,
        cycleTaskFailCount: 0, cycleTaskSuccessCount: 0, cycleTaskRunningTotalCount: 0
      },
      cronTopData: {
        cronTaskFailTotalCount: 0, cronTaskSuccessTotalCount: 0, cronTaskFailCount: 0, cronTaskSuccessCount: 0,
        cronTaskRunningTotalCount: 0, cronTaskTodoCount: 0
      },
      nodeList: [],
      hasLogData: true,
      activeModel: 'app',
      pageIndex: 0,
      jobList: [
        {bizDate: '2020-12-24', todoRunCount: 3210, runningCount: 132},
        {bizDate: '2020-12-23', todoRunCount: 310, runningCount: 32},
        {bizDate: '2020-12-22', todoRunCount: 110, runningCount: 2},
        {bizDate: '2020-12-21', todoRunCount: 10, runningCount: 0}
      ],
      gridData: [
        {"operation": "以JSON格式导出"},
        {"operation": "以CSV格式导出"},
        {"operation": "查看详情"}
      ],
      // percentage:20,
      customColor: "#42800D",
      detailShow: "",
      disOption: {
        cpuDisplay: true,
        memDisplay: true,
        fzDisplay: true,
        alertDisplay: true
      }
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ]),
    calculate() {
      //   console.log("-------------------");
      // console.log(this.topData.cycleTaskTodoTotalCount);
      // console.log(this.topData.cycleTaskTodoCount);
      return parseInt(this.topData.cycleTaskTodoTotalCount) - parseInt(this.topData.cycleTaskTodoCount);
    }
  },
  created() {
    //   console.log("^^^-------------------------------------------------------")
    //   console.log(this.topData)
    this.findCronTaskCountTopData();
    this.findPeriodTaskCountTopData();
    this.findRunningStateLogByAppCode();
    this.findNodeByCurrentApp();
    this.getCurrentAppInf();
    this.getCycleJobRunInfCurrentApp();
    this.user.roles.forEach(item => {
      if ('admin' == item) {
        this.activeModel = 'admin'
      }
    })
  },
  methods: {
    // 修改table header的背景色
    tableHeaderColor({row, column, rowIndex, columnIndex}) {
      if (rowIndex === 0) {
        return 'background-color: #ebf1fb;font-weight:600;font-size:12px;'
      } else if (rowIndex === 1) {
        return 'background-color: #f7faff;font-size:14px;'
      } else if (rowIndex === 2) {
        return 'background-color: #f7faff;font-size:14px;'
      }
    },
    goBack() {
      this.$router.push({path: "/app/app"});
    },

    load() {
      if (this.hasLogData && this.pageIndex < 100) {
        this.pageIndex++;
        this.findRunningStateLogByAppCode();
      }
    },
    getCurrentAppInf() {
      api.getCurrentAppInf()
        .then(response => {
          this.appInf = response
        })
        .catch(error => {
          this.$notify.error({title: '错误', message: error});
        })
    },
    findRunningStateLogByAppCode() {
      api.findRunningStateLogByAppCode(this.pageIndex)
        .then(response => {
          if (response != null && response.length > 0) {
            this.logList = this.logList.concat(response);
          } else {
            this.hasLogData = false;
          }
        })
        .catch(error => {
          this.$notify.error({title: '错误', message: error});
        })
    },
    findNodeByCurrentApp() {
      api.findNodeByCurrentApp()
        .then(response => {
          // console.log(this.nodeList)
          this.nodeList = response
        })
        .catch(error => {
          this.$notify.error({title: '错误', message: error});
        })
    },
    findCronTaskCountTopData() {
      api.findCronTaskCountTopData()
        .then(response => {
          for (var i in response) {
            response[i] = Number(response[i])
          }
          this.cronTopData = response
        })
        .catch(error => {
          this.$notify.error({title: '错误', message: error});
        })
    },
    findPeriodTaskCountTopData() {
      api.findPeriodTaskCountTopData()
        .then(response => {
          for (var i in response) {
            response[i] = Number(response[i])
          }
          this.periodTopData = response
        })
        .catch(error => {
          this.$notify.error({title: '错误', message: error});
        })
    },

    getCycleJobRunInfCurrentApp() {
      api.getCycleJobRunInfCurrentApp()
        .then(response => {
          this.jobList = response
        })
        .catch(error => {
          this.$notify.error({title: '错误', message: error});
        })
    },
    changeTime(timeType, i) {
      this.cur = i
      this.$refs.taskFinishStatusLineChart.getData(timeType);
      this.$refs.taskBlockLineChart.getData(timeType);
      this.$refs.agentConAndResChart.getData(timeType);
    }
  }
}
</script>
